<template>
  <view class="buy">
    <uni-nav-bar @clickLeft="$ui.back()" color="#fff" backgroundColor="#323232" background-color="rgb(51,51,51)"
      left-icon="left" status-bar :title="title" />
    <view class="buy_box">

    </view>
    <view class="buy_dialog">
      <view class="dialog_title">
        标题
      </view>
      <view class="dialog_text">
        最小限买限额{{ trading_min }}
      </view>
      <view class="dialog_ddc">
        1000DDC
      </view>
      <view class="dialog_payment">
        <image src="../../static/cardService/alipay.png" mode=""></image>
        <image src="../../static/cardService/weixin.png" mode=""></image>
        <image src="../../static/cardService/bank.png" mode=""></image>
      </view>
      <view class="dialog_num">
        编号：*********123
      </view>
      <view class="dialog_heng">

      </view>
    </view>
    <view class="mai_num u-flex u-ali-center">
      <view class="left">
        卖出数量
      </view>
      <view class="right">
        {{number}}
      </view>
    </view>
    <view class="mai_num u-flex u-ali-center" style="margin-top: 20rpx;">
      <view class="left">
        实收金额
      </view>
      <view class="right">
        {{amount}}
      </view>
    </view>
    <view class="button" @click="submitClick()">
      {{button}}
    </view>
    <view style="margin-top: 120rpx;box-sizing: border-box;margin-left: 30rpx;">
      <u-radio-group v-model="value2">
        <u-radio activeColor="#FFD76B" shape="square" label="同意并阅读"
          style="font-size: 22rpx;font-family: PingFang SC;font-weight: 500;color: #999999;"></u-radio>
        <text style="color: #D2B17C;font-size: 22rpx;font-family: PingFang SC;font-weight: 500;">《交易协议》</text>
      </u-radio-group>
    </view>
    <view class="code_dialog u-flex u-ali-center" v-if="isDialog" @click.stop="isDialog = false">
      <view class="code_dialog_box u-flex u-ju-center u-ali-center" @click.stop>
        <view class="" style="text-align: center;">
          请输入支付密码
        </view>
        <view class="">
          <u-code-input v-model="pay_word" :maxlength="6"></u-code-input>
        </view>
        <button @click="submitClick">确认</button>
      </view>
    </view>
  </view>
</template>

<script>
  import {
    getTradingDetail,
    addBuyOrder,
    addSellOrder
  } from "../../api/cardService/card.js"
  export default {
    data() {
      return {
        isDialog: false,
        pay_word: '',
        value2: '',
        type: 3,
        id: '',
        title: '',
        button: '',
        number: '',
        amount: '',
        trading_min: '',
        pay_pass: ''
      }
    },
    methods: {
      submitClick() {
        if (this.pay_word == '') {
          console.log(11);
          if (this.pay_pass) {
            console.log(22);
            this.$ui.toast('请填写密码')
            this.isDialog = true
            return;
          }
        } else {
          console.log(33);
          this.isDialog = false
        }
        if (this.type == 0) {
          // 买单交易
          addBuyOrder({
            pay_pass: this.pay_word,
            is_fingerprint: '',
            is_face: '',
            id: this.id,
            number: this.number,
            amount: this.amount
          }).then(res => {
            console.log(res);
            if (res.code == 404) {
              if (res.msg == '支付密码错误') {
                this.$ui.toast('支付密码错误,请重新填写')
                this.pay_word = ''
                this.isDialog = true
              } else {
                this.$ui.toast(res.msg)
              }
            } else {
              this.$ui.toast(res.msg)
              setTimeout(() => {
                uni.navigateBack()
              }, 500)
            }
          })
        } else {
          // 卖单交易
          addSellOrder({
            pay_pass: '123456',
            is_fingerprint: '',
            is_face: '',
            id: this.id,
            number: this.number,
            amount: this.amount
          }).then(res => {
            if (res.code == 404) {
              if (res.msg == '支付密码错误') {
                this.$ui.toast('支付密码错误,请重新填写')
                this.pay_word = ''
                this.isDialog = true
              } else {
                this.$ui.toast(res.msg)
              }
            } else {
              this.$ui.toast(res.msg)
              setTimeout(() => {
                uni.navigateBack()
              }, 500)
            }
          })
        }
      },
      getDetail() {
        getTradingDetail({
          id: this.id
        }).then(res => {
          console.log('这是详情', res.data)
          this.trading_min = res.data.trading_min
          this.number = res.data.trading_number.split('.')[0]
          this.amount = res.data.trading_stock
          this.pay_pass = res.data.user.pay_pass
          uni.hideLoading()
        })
      }
    },
    onLoad(opt) {
      this.$ui.loading('加载中')
      this.type = opt.type;
      this.id = opt.id
      if (this.type == 0) {
        this.title = 'DDC买单'
        this.button = '确定卖出'
      } else {
        this.title = 'DDC卖单'
        this.button = '确定购买'
      }
      this.getDetail() // 获取详情
    },
  }
</script>

<style lang="less" scoped>
  .buy_box {
    position: relative;
    top: -1rpx;
    width: 100%;
    height: 120rpx;
    background-color: rgb(51, 51, 51);
    border-radius: 0 0 50% 50%;
  }

  .buy_dialog {
    position: relative;
    top: -110rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    height: 210rpx;
    border-radius: 6rpx;
    box-shadow: 0 0 2rpx #FAFAFA;
    background-color: #FFF;

    .dialog_title {
      position: absolute;
      top: 30rpx;
      left: 20rpx;
      font-size: 24rpx;
    }

    .dialog_text {
      position: absolute;
      top: 80rpx;
      left: 20rpx;
      font-size: 26rpx;
    }

    .dialog_ddc {
      position: absolute;
      top: 30rpx;
      right: 20rpx;
      font-size: 24rpx;
    }

    .dialog_num {
      position: absolute;
      top: 150rpx;
      left: 20rpx;
      color: #dddddd;
      font-size: 22rpx;
    }

    .dialog_payment {
      position: absolute;
      top: 80rpx;
      right: 20rpx;
      z-index: 9;

      image {
        margin-left: 5rpx;
        width: 30rpx;
        height: 30rpx;
      }
    }

    .dialog_heng {
      position: absolute;
      width: 93%;
      height: 3rpx;
      top: 130rpx;
      left: 50%;
      transform: translateX(-50%);
      background-color: #dddddd;
    }
  }

  .mai_num {
    position: relative;
    top: 0rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    height: 60rpx;
    background-color: #Fff;

    view {
      font-size: 24rpx;
    }

    .left {
      margin-left: 15rpx;
    }

    .right {
      margin-left: 25rpx;
    }
  }

  .button {
    position: relative;
    top: 30rpx;
    left: 50%;
    transform: translateX(-50%);
    width: 92%;
    height: 70rpx;
    font-size: 26rpx;
    text-align: center;
    color: #fff;
    line-height: 70rpx;
    background-color: rgb(50, 50, 50);
  }

  .code_dialog {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.5);
    z-index: 11;

    .code_dialog_box {
      flex-wrap: wrap;
      margin: 0 auto;
      width: 80%;
      height: 400rpx;
      background-color: #fff;
      box-shadow: 0 rgba(0, 0, 0, 0.5);
      border-radius: 10rpx;
    }
  }
</style>
